<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>

    <meta charset="utf-8"/>

    <title>Demo Chat</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <style>
		body {
			padding:20px;
		}
		#console {
			height: 400px;
			overflow: auto;
		}
		.userId-msg {color:orange;}
		.connect-msg {color:green;}
		.disconnect-msg {color:red;}
		.send-msg {color:#888}



    </style>


    <!--    <script src="js/socket.io/socket.io.js"></script>-->
    <script src="js/2.1.1/socket.io.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="js/jquery-1.10.1.min.js"></script>

    <script>
        var userId = 'user' + Math.floor((Math.random()*1000)+1);
		var socket =  io.connect('http://localhost:8092?userId='+userId,{
		'reconnection delay' : 2000,
        'force new connection' : true
        });

		socket.on('connect', function() {
			output('<span class="connect-msg">'+userId+ ' id='+ socket.id+' Client has connected to the server!</span>');
    <!--            socket.emit('connect', 'connect xxxxx');-->
		});

		socket.on('chatevent', function(data) {
			output('<span class="userId-msg"> ' + data.userId +' '+ data.message+'  '+data.sessionId + ' </span> ');
<!--                output('<span class="userId-msg"> '+data + ' </span> ');-->
		});

		socket.on('disconnect', function() {
			output('<span class="disconnect-msg">The client has disconnected!</span>');
		});

        function sendDisconnect() {
           socket.disconnect();
        }

		function sendMessage() {
           var message = $('#msg').val();
           var dest = $('#dest').val();
           $('#msg').val('');

           var jsonObject = {userId: userId,
                             message: message,
                             dest: dest};
           socket.emit('chatevent', jsonObject);
		}

		function output(message) {
            var currentTime = "<span class='time'>" +  moment().format('HH:mm:ss.SSS') + "</span>";
            var element = $("<div>" + currentTime + " " + message + "</div>");
			$('#console').prepend(element);
		}

        $(document).keydown(function(e){
            if(e.keyCode == 13) {
                $('#send').click();
            }
        });

    </script>
</head>

<body>

<h1>Springboot Netty-socketio Demo Chat & Rocketmq boardcast</h1>

<br/>

<div id="console" class="well">
</div>

<form class="well form-inline" onsubmit="return false;">
    <input id="msg" class="input-xlarge" type="text" placeholder="input msg..."/>
    <input id="dest" class="input-xlarge" type="text" placeholder="sendTo..."/>
    <button type="button" onClick="sendMessage()" class="btn" id="send">Send</button>
    <button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
</form>


</body>

</html>
